<template>
  <el-col>
    <el-col>
      <div class="remindText">将会打印以下用户的信函:</div>
    </el-col>
    <el-table :data="this.printDataArr" header-align="center" max-height="500" border stripe>
      <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
      <el-table-column prop="custName" label="客户姓名" align="center" min-width="90"></el-table-column>
      <el-table-column prop="cupoCasenum" label="案件编号" align="center" min-width="100"></el-table-column>
      <el-table-column label="操作" min-width="130" align="center">
        <template scope="scope">
          <el-button @click="removePrintClick(scope)" type="text" size="small">移出</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col class="selectTempCol">
      <el-col class="tip">
        <div>请选择打印时使用的模板：</div>
      </el-col>
      <el-form ref="form" :model="form" class="selectTemp">
        <el-form-item>
          <el-radio-group v-model="form.resource">
            <el-radio label="信函模板一"></el-radio>
            <el-radio label="信函模板二"></el-radio>
            <el-radio label="信函模板三"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="printAllClick()">一键打印</el-button>
          <el-button @click="printAllDataClick()">一键套打</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <div>
      <letter-temp-one id="lt-one" ref="lt-one" style="display:none" :printDataArr="printDataArr"></letter-temp-one>
      <letter-temp-three id="lt-three" ref="lt-three" style="display:none" :printDataArr="printDataArr"></letter-temp-three>
      <letter-temp-two id="lt-two" ref="lt-two" style="display:none" :printDataArr="printDataArr"></letter-temp-two>
    </div>
  </el-col>
</template>
<script>
  import { mapState, mapMutations } from 'vuex'
  import LetterTempOne from '@/views/smart-acc/LetterTempOne'
  import LetterTempTwo from '@/views/smart-acc/LetterTempTwo'
  import LetterTempThree from '@/views/smart-acc/LetterTempThree'

  export default {
    name: 'letter-batch-print',
    data() {
      return {
        form: {
          resource: '信函模板一'
        },
        printDataArr: []
      }
    },
    methods: {
      batchDataSend(multipleSelection) {
        this.printDataArr = multipleSelection
      },
      /**
       * 一键套打
       */
      printAllDataClick() {
        console.log(this.dataArr)
        var smodel = this.form.resource
        if (this.printDataArr.length === 0) {
          this.$alert('请选择要打印的信函', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        if (!smodel) {
          this.$alert('请选择打印要使用的模板', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        if (smodel === '信函模板一') {
          this.$refs['lt-one'].lt1ChangeStyle()
          setTimeout(() => {
            var content = this.$refs['lt-one'].$el.innerHTML
            var nWindow = window.open('.')
            nWindow.document.write(content)
            nWindow.print()
            nWindow.close()
          }, 500)
          setTimeout(() => {
            this.$refs['lt-one'].refreshPage()
          }, 500)
        }
        if (smodel === '信函模板二') {
          this.$refs['lt-two'].l2_changeStyle()
          setTimeout(() => {
            var content = this.$refs['lt-two'].$el.innerHTML
            var nWindow = window.open('.')
            nWindow.document.write(content)
            nWindow.print()
            nWindow.close()
          }, 500)
          /**
           * 点击【一键套打】后刷新
           */
          setTimeout(() => {
            this.$refs['lt-two'].refreshPage2()
          }, 500)
        }
        if (smodel === '信函模板三') {
          this.$refs['lt-three'].l3_changeStyle()
          setTimeout(() => {
            var newWindow = window.open('.')
            var content = this.$refs['lt-three'].$el.innerHTML
            newWindow.document.write(content)
            newWindow.document.close()
            newWindow.print()
            this.$refs['lt-three'].l3_originStyle()
            newWindow.close()
          }, 500)
        }
      },
      /**
       * 移除不打印的客户
       */
      removePrintClick(scope) {
        let arr = []
        this.printDataArr.map((v, i) => {
          if (i !== scope.$index) {
            arr.push(v)
          }
        })
        this.printDataArr = arr
      },
      /**
       * 一键打印
       */
      printAllClick() {
        var smodel = this.form.resource
        if (this.printDataArr.length === 0) {
          this.$alert('请选择要打印的信函', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        if (!smodel) {
          this.$alert('请选择打印要使用的模板', '提示', {
            confirmButtonText: '确定'
          })
          return
        }
        var content
        if (smodel === '信函模板一') {
          content = this.$refs['lt-one'].$el.innerHTML
        }
        if (smodel === '信函模板二') {
          content = this.$refs['lt-two'].$el.innerHTML
        }
        if (smodel === '信函模板三') {
          content = this.$refs['lt-three'].$el.innerHTML
        }
        var nWindow = window.open('.')
        nWindow.document.write(content)
        nWindow.print()
        nWindow.close()
      },
      ...mapMutations([
        'updatePrintInfo'
      ])
    },
    computed: {
      ...mapState({
        Print_info: state => state.smartAcc.print_info
      })
    },
    components: {
      LetterTempOne,
      LetterTempTwo,
      LetterTempThree
    }
  }

</script>
<style lang="less" scoped>
  .remindText {
    text-align: left;
    padding-bottom: 10px;
  }

  .selectTemp,
  .selectTempCol {
    padding-top: 20px;
  }

  .tip {
    text-align: left;
  }

</style>
